<template>
	<view>
		<view @tap="rangeShow" class="formlist inputtext">
			<view class="formgroup border-bottom-E3E3E5">
				<view class="labletitle" v-if="showLabel">
					<label>{{label}}</label>
					<text class="required" v-show="required">*</text>
				</view>
				<view class="controlvalue">
					<input type="text" v-model="valueTitle" disabled="true">
				</view>
			</view>
		</view>
		<range-picker :visible.sync="rangData.rangeVisible" mode="range" startYear="2017" endYear="2060" :value="rangData.rangeVal"
		 :current="true" @confirm="rangeConfirm($event,'range')" @cancel="rangeCancel" ref="range"></range-picker>
	</view>
</template>

<script>
	import rangePicker from '@/components/range-picker/range-picker.vue'
	export default {
		props: {
			value: {
				type: Array,
				default: () => []
			},
			jnpfKey: {
				type: String,
				default () {
					return ''
				}
			},
			placeholder: {
				type: String,
				default () {
					return '请选择'
				}
			},
			label: {
				type: String,
				default () {
					return ''
				}
			},
			disabled: {
				type: Boolean,
				default () {
					return false
				}
			},
			required: {
				type: Boolean,
				default () {
					return false
				}
			},
			showLabel: {
				type: Boolean,
				default () {
					return true
				}
			},
		},
		data() {
			return {
				valueTitle: '',
				rangData: {
					rangeVisible: false,
					rangeVal: ['2021-01-01', '2022-01-01'],
				},
			};
		},
		created() {
			if(this.value != null){
				let dateType = "yyyy-MM-dd";
				let startDate = this.$helper.toDate(this.value[0], dateType);
				let endDate = this.$helper.toDate(this.value[1], dateType);
				const resDate = startDate + '至' + endDate;
				this.valueTitle = resDate
				
			}
		},
		watch: {
			value(val) {
				
				let dateType = "yyyy-MM-dd";
				let startDate = this.$helper.toDate(val[0], dateType);
				let endDate = this.$helper.toDate(val[1], dateType);
				const resDate = startDate + '至' + endDate;
				this.valueTitle = resDate
			}
		},
		methods: {
			/* 日期范围 */
			rangeShow() {
				this.rangeVisible = true
				this.$refs.range.show();
			},

			/* 时间范围点击确定 */
			rangeConfirm(res) {
				
				this.result = res;
				// this.valueTitle = this.result
				if (res != '' && res != undefined) {
					let dateArr = [];
					let dateStart = res
					let dateEnd = res
					dateStart = dateStart.substr(0, dateStart.indexOf("至"));
					dateEnd = dateEnd.substr(-10, dateEnd.indexOf("至"));
					let dateStart2 = Date.parse(dateStart);
					let dateEnd2 = Date.parse(dateEnd);
					dateArr.push(dateStart2, dateEnd2)
					this.$emit('input', dateArr)
				} else {
					this.$emit('input', null)
				}
			},

			/* 时间范围点击取消 */
			rangeCancel() {
				
			},
		}
	}
</script>

<style>
	.required{
		color: red;
	}
</style>
